<template>
  <div class="feedback-page">
    <van-nav-bar
      :title="t('service.feedback.title')"
      left-arrow
      @click-left="onClickLeft"
      :border="false"
      class="custom-nav"
    />
    
    <div class="page-content">
      <!-- 提示卡片 -->
      <div class="tip-card card">
        <van-icon name="info-o" class="tip-icon" />
        <div class="tip-content">
          <h4>{{ currentLang === 'zh' ? '温馨提示' : 'Notice' }}</h4>
          <p>{{ currentLang === 'zh' ? 
            '为了更好地解决您的问题，请尽可能详细地描述您遇到的情况。我们会在24小时内回复您。' : 
            'To better solve your problem, please describe your situation in detail. We will reply within 24 hours.' }}</p>
        </div>
      </div>

      <!-- 智能助手区域 -->
      <div class="ai-assistant-section">
        <h3 class="section-title">{{ currentLang === 'zh' ? '智能助手' : 'AI Assistant' }}</h3>
        <div class="ai-card card">
          <div class="ai-header">
            <van-icon name="chat" class="ai-icon" />
            <h4>{{ currentLang === 'zh' ? 'AI问题解答' : 'AI Q&A' }}</h4>
          </div>
          <p class="ai-desc">{{ currentLang === 'zh' ? 
            '我们的智能助手可以即时回答您的常见问题，快速解决您的疑问。' : 
            'Our AI assistant can instantly answer your common questions and quickly resolve your concerns.' }}</p>
          <div v-if="!showAiChat" class="ai-placeholder">
            <div class="placeholder-content">
              <van-icon name="question-o" />
              <p>{{ currentLang === 'zh' ? '点击下方按钮开始对话' : 'Click the button below to start a conversation' }}</p>
            </div>
            <van-button type="primary" round size="small" @click="toggleAiChat">
              {{ currentLang === 'zh' ? '开始对话' : 'Start Chat' }}
            </van-button>
          </div>
          <div v-else class="ai-chat-container">
            <!-- 这里将来放置Dify嵌入页面 -->
            <div class="dify-placeholder">
              <p>{{ currentLang === 'zh' ? 'Dify AI 助手将在此处加载...' : 'Dify AI Assistant will load here...' }}</p>
              <p class="placeholder-hint">{{ currentLang === 'zh' ? 
                '后续将嵌入Dify聊天界面，实现智能问答功能' : 
                'The Dify chat interface will be embedded later to implement intelligent Q&A functions' }}</p>
            </div>
            <van-button type="default" round size="small" @click="toggleAiChat">
              {{ currentLang === 'zh' ? '收起对话' : 'Close Chat' }}
            </van-button>
          </div>
        </div>
      </div>

      <!-- 反馈表单 -->
      <h3 class="section-title">{{ currentLang === 'zh' ? '问题表单' : 'Feedback Form' }}</h3>
      <van-form @submit="onSubmit" class="feedback-form">
        <div class="form-card card">
          <van-cell-group :border="false">
            <!-- 问题类型 -->
            <van-field
              v-model="formData.type"
              is-link
              readonly
              name="type"
              :label="currentLang === 'zh' ? '问题类型' : 'Issue Type'"
              :placeholder="currentLang === 'zh' ? '请选择问题类型' : 'Please select issue type'"
              :rules="[{ required: true, message: currentLang === 'zh' ? '请选择问题类型' : 'Please select issue type' }]"
              @click="showPicker = true"
            >
              <template #right-icon>
                <van-tag v-if="formData.type" type="primary" round>{{ formData.type }}</van-tag>
              </template>
            </van-field>

            <!-- 问题标题 -->
            <van-field
              v-model="formData.title"
              name="title"
              :label="currentLang === 'zh' ? '问题标题' : 'Issue Title'"
              :placeholder="currentLang === 'zh' ? '请用简短的语言描述问题' : 'Please describe the issue briefly'"
              :rules="[{ required: true, message: currentLang === 'zh' ? '请输入问题标题' : 'Please enter issue title' }]"
              maxlength="50"
              show-word-limit
            />

            <!-- 问题描述 -->
            <van-field
              v-model="formData.description"
              name="description"
              :label="currentLang === 'zh' ? '问题描述' : 'Description'"
              type="textarea"
              rows="4"
              :placeholder="descriptionPlaceholder"
              :rules="[{ required: true, message: currentLang === 'zh' ? '请输入问题描述' : 'Please enter description' }]"
              maxlength="500"
              show-word-limit
            />

            <!-- 图片上传 -->
            <van-field
              name="uploader"
              :label="currentLang === 'zh' ? '相关截图' : 'Screenshots'"
            >
              <template #input>
                <van-uploader
                  v-model="formData.images"
                  multiple
                  :max-count="3"
                  :max-size="5 * 1024 * 1024"
                  @oversize="onOversize"
                  :after-read="afterRead"
                >
                  <div class="upload-button">
                    <van-icon name="photograph" />
                    <span>{{ currentLang === 'zh' ? '上传图片' : 'Upload Images' }}</span>
                    <div class="upload-tip">{{ currentLang === 'zh' ? '最多3张，每张不超过5M' : 'Max 3 images, 5MB each' }}</div>
                  </div>
                </van-uploader>
              </template>
            </van-field>

            <!-- 联系方式 -->
            <van-field
              v-model="formData.contact"
              name="contact"
              :label="currentLang === 'zh' ? '联系方式' : 'Contact Info'"
              :placeholder="currentLang === 'zh' ? '请留下您的手机号或邮箱' : 'Please leave your phone or email'"
              :rules="[
                { required: true, message: currentLang === 'zh' ? '请输入联系方式' : 'Please enter contact info' },
                { pattern: /^1[3-9]\d{9}$|^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: currentLang === 'zh' ? '请输入正确的手机号或邮箱' : 'Please enter a valid phone or email' }
              ]"
            />
          </van-cell-group>
        </div>

        <!-- 提交按钮 -->
        <div class="submit-button">
          <van-button 
            round 
            block 
            type="primary" 
            native-type="submit"
            :loading="submitting"
          >
            {{ currentLang === 'zh' ? '提交反馈' : 'Submit Feedback' }}
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 问题类型选择器 -->
    <van-popup
      v-model:show="showPicker"
      position="bottom"
      round
    >
      <van-picker
        :columns="localizedProblemTypes"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        :title="currentLang === 'zh' ? '选择问题类型' : 'Select Issue Type'"
        show-toolbar
        :confirm-button-text="currentLang === 'zh' ? '确认' : 'Confirm'"
        :cancel-button-text="currentLang === 'zh' ? '取消' : 'Cancel'"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { getStoredLanguage } from '../../utils/language'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()

// 获取当前语言
const currentLang = route.query.lang || getStoredLanguage()

const showPicker = ref(false)
const submitting = ref(false)
const showAiChat = ref(false)

// 中文问题类型
const zhProblemTypes = [
  '功能异常',
  '系统卡顿',
  '连接问题',
  '数据异常',
  '使用建议',
  '其他问题'
]

// 英文问题类型
const enProblemTypes = [
  'Function Abnormal',
  'System Lag',
  'Connection Issue',
  'Data Error',
  'Usage Suggestion',
  'Other Issues'
]

// 根据语言选择问题类型
const localizedProblemTypes = computed(() => {
  return currentLang === 'zh' ? zhProblemTypes : enProblemTypes
})

// 问题描述占位文字
const descriptionPlaceholder = computed(() => {
  if (currentLang === 'zh') {
    return `请详细描述您遇到的问题，例如：
1. 问题发生的具体场景
2. 问题发生的频率
3. 尝试过的解决方法`
  } else {
    return `Please describe your issue in detail, for example:
1. The specific scenario of the issue
2. The frequency of the issue
3. Solutions you have tried`
  }
})

const formData = reactive({
  type: '',
  title: '',
  description: '',
  images: [],
  contact: ''
})

// 判断表单是否有内容
const hasFormContent = () => {
  return formData.type || formData.title || formData.description || formData.images.length > 0 || formData.contact
}

const onClickLeft = () => {
  if (hasFormContent()) {
    showDialog({
      title: currentLang === 'zh' ? '提示' : 'Notice',
      message: currentLang === 'zh' ? '确定要放弃当前编辑的内容吗？' : 'Are you sure you want to discard the current content?',
      showCancelButton: true,
      confirmButtonText: currentLang === 'zh' ? '确定' : 'Confirm',
      cancelButtonText: currentLang === 'zh' ? '取消' : 'Cancel',
    }).then((action) => {
      if (action === 'confirm') {
        // 返回时保留语言参数
        router.push({
          path: '/service',
          query: { lang: currentLang }
        })
      }
    })
  } else {
    // 返回时保留语言参数
    router.push({
      path: '/service',
      query: { lang: currentLang }
    })
  }
}

const onConfirm = (value) => {
  formData.type = value
  showPicker.value = false
}

const toggleAiChat = () => {
  showAiChat.value = !showAiChat.value
}

const onOversize = () => {
  showToast(currentLang === 'zh' ? '图片大小不能超过5M' : 'Image size cannot exceed 5MB')
}

const afterRead = (file) => {
  // 文件上传逻辑
  console.log('上传图片', file)
}

const onSubmit = () => {
  submitting.value = true
  
  // 模拟提交
  setTimeout(() => {
    submitting.value = false
    showToast({
      type: 'success',
      message: currentLang === 'zh' ? '反馈提交成功，我们将尽快处理！' : 'Feedback submitted successfully, we will process it ASAP!',
      onClose: () => {
        router.push({
          path: '/service',
          query: { lang: currentLang }
        })
      }
    })
  }, 1500)
}
</script>

<style scoped>
.feedback-page {
  min-height: 100vh;
  background: transparent;
  padding-bottom: 2rem;
}

.custom-nav {
  background: transparent;
}

.tip-card {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgba(0, 229, 255, 0.1);
  backdrop-filter: blur(10px);
}

.tip-icon {
  font-size: 1.25rem;
  color: var(--warning-color);
  margin-right: 0.75rem;
  margin-top: 0.125rem;
}

.tip-content h4 {
  margin: 0;
  font-size: 0.875rem;
  color: #fff;
  margin-bottom: 0.25rem;
}

.tip-content p {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* AI助手区域 */
.ai-assistant-section {
  margin-bottom: 1.5rem;
}

.ai-card {
  padding: 1rem;
  background: rgba(16, 32, 58, 0.7);
  backdrop-filter: blur(10px);
}

.ai-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.ai-icon {
  font-size: 1.25rem;
  color: var(--primary-color);
  margin-right: 0.5rem;
}

.ai-header h4 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}

.ai-desc {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.ai-placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

.placeholder-content .van-icon {
  font-size: 2rem;
  color: var(--info-color);
  margin-bottom: 0.5rem;
}

.placeholder-content p {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.ai-chat-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dify-placeholder {
  width: 100%;
  min-height: 200px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  padding: 1rem;
}

.dify-placeholder p {
  margin: 0;
  font-size: 0.875rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.placeholder-hint {
  color: rgba(255, 255, 255, 0.6) !important;
}

.form-card {
  margin-bottom: 1.5rem;
  background: rgba(16, 32, 58, 0.7);
  backdrop-filter: blur(10px);
}

:deep(.van-cell) {
  background-color: transparent;
}

:deep(.van-field__label) {
  color: #fff;
}

:deep(.van-cell__value) {
  color: #fff;
}

:deep(.van-field__control) {
  color: #fff;
}

:deep(.van-field__control::placeholder) {
  color: rgba(255, 255, 255, 0.5);
}

.upload-button {
  background: rgba(0, 229, 255, 0.1);
}

.upload-button .van-icon {
  color: var(--primary-color);
}

.upload-button span {
  color: #fff;
}

.upload-tip {
  color: rgba(255, 255, 255, 0.6);
}

:deep(.van-button--primary) {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

:deep(.van-tag--primary) {
  background: var(--primary-color);
}

.submit-button {
  margin: 0 1rem;
}
</style> 